---
title: React Timeline - Flowbite
description: Use the timeline component from Flowbite React to display a list of items and events in a chronological order based on multiples styles, colors and layouts
---

The timeline component can be used to show a list of events and items in a chronological order with a vertical or horizontal alignment based on multiple examples, styles, layouts, and colors.

You can customize the content and options of the timeline component by using the custom React props API from Flowbite React and the utility classes from Tailwind CSS for quick style changes.

In order to use the timeline component make sure to import it first from Flowbite React:

```jsx
import { Timeline } from "flowbite-react";
```

## Default timeline

Use the `<Timeline>` React component and the child components to create a list of items inside the timeline component featuring the date, title, description and even a button.

<Example name="timeline.root" />

## Vertical timeline

Use this example to show the timeline component and the child components in a vertical alignment.

<Example name="timeline.vertical" />

## Horizontal timeline

Use the `horizontal` prop to show the timeline component and the child components in a horizontal alignment.

<Example name="timeline.horizontal" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="timeline" />

## References

- [Flowbite Timeline](https://flowbite.com/docs/components/timeline/)
